<template>
  <div>
    <div id="main" style="width: 800px;height: 600px">

    </div>
    <button @click="change">惦记我</button>
  </div>

</template>

<script>

import * as echarts from "echarts";
export default {
  name: "upload-form",
  data() {
    return {
      data: [],
      date: [],
      option : {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: 'Large Area Chart'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1968/10/5','1968/10/6']
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: [12,15]
          }
        ]
      }
    }
  },
  methods: {
    change() {
      this.option.xAxis.data=this.date
      this.option.series[0].data=this.data
      console.log(this.option.xAxis.data+"/n"+this.option.series.data)
      this.init()
    },
    initData(){
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      this.data = [Math.random() * 300];
      for (let i = 1; i < 20; i++) {
        var now = new Date((base += oneDay));
        this.date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
        this.data.push(Math.random() * 300);
      }
    },
    init() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      this.option && myChart.setOption(this.option);
    }
  },
  mounted() {
    this.initData()
    this.init()
  }
}
</script>

<style scoped>

</style>
